<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侵权证据挖掘</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f8f9fc;
        }
        .stats-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .progress-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        .progress-value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .search-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .data-table {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-pending {
            background: #ffeeba;
            color: #856404;
        }
        .status-processing {
            background: #b8daff;
            color: #004085;
        }
        .status-completed {
            background: #c3e6cb;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 顶部统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="stats-card">
                    <h6>侵权行为数据收集</h6>
                    <p class="text-muted mb-2">需按要求完成整理</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>请求接收中</span>
                        <span>1 小时前</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <h6>证据链整合分析</h6>
                    <p class="text-muted mb-2">标题正在遍历确定</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>整理分析中</span>
                        <span>5 小时前</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card d-flex justify-content-around">
                    <div class="text-center">
                        <div id="validEvidenceChart" style="width: 120px; height: 120px;"></div>
                        <div class="mt-2">有效证据占比</div>
                        <div class="progress-value">62%</div>
                    </div>
                    <div class="text-center">
                        <div id="verifiedEvidenceChart" style="width: 120px; height: 120px;"></div>
                        <div class="mt-2">已按需证据占比</div>
                        <div class="progress-value">62%</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索表单 -->
        <div class="search-form">
            <div class="row g-3">
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="证据ID">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="证据类型">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="来源渠道">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="获取时间">
                </div>
                <div class="col-md">
                    <input type="text" class="form-control" placeholder="关联侵权行为">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100">搜索</button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100">新增</button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="data-table">
            <table class="table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>证据ID</th>
                        <th>证据类型</th>
                        <th>来源渠道</th>
                        <th>获取时间</th>
                        <th>关联侵权行为</th>
                        <th>证据效力</th>
                        <th>提交状态</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>E003</td>
                        <td>证人证言管理</td>
                        <td>实名用户提供</td>
                        <td>2025年05月20日 09:45:00</td>
                        <td>某电商平台滥用用户个人信息导致用户遭遇诈骗</td>
                        <td><span class="status-badge status-processing">中</span></td>
                        <td>未提交</td>
                        <td>言词清晰，但需文字补充确认</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-warning">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>E002</td>
                        <td>服务器日志记录</td>
                        <td>数据存储服务器导出</td>
                        <td>2025年04月15日 14:30:00</td>
                        <td>某网络平台未经授权收集用户浏览记录用于营销投放</td>
                        <td><span class="status-badge status-completed">较强</span></td>
                        <td>待审核</td>
                        <td>记录了用户网络行为及数据收集时间</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-warning">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>E001</td>
                        <td>数字记录整合</td>
                        <td>社交软件导出</td>
                        <td>2025年03月16日 10:20:00</td>
                        <td>某公司员工私自将客户信息泄露给竞争对手</td>
                        <td><span class="status-badge status-pending">弱</span></td>
                        <td>已提交</td>
                        <td>清晰显示了信息交互时间</td>
                        <td>
                            <button class="btn btn-sm btn-primary">编辑</button>
                            <button class="btn btn-sm btn-warning">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div>共 3 条</div>
                <div class="d-flex align-items-center">
                    <ul class="pagination mb-0">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                    <select class="form-select ms-2" style="width: auto;">
                        <option>5 条/页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 在表格后面、</body>前添加以下代码 -->
    <script src="js/dataHandler.js"></script>
    <script>
        // 模拟证据数据
        const mockEvidences = Array.from({length: 160}, (_, index) => ({
            id: index + 1,
            evidenceId: `E${String(index + 1).padStart(3, '0')}`,
            evidenceType: ['电子记录', '数据日志', '用户投诉', '系统记录'][Math.floor(Math.random() * 4)],
            source: ['系统采集', '用户上报', '人工录入', '自动抓取'][Math.floor(Math.random() * 4)],
            collectTime: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)).toLocaleDateString(),
            dataSize: Math.floor(Math.random() * 1000) + 100 + 'MB',
            reliability: ['高', '中', '低'][Math.floor(Math.random() * 3)],
            status: ['已验证', '待验证', '验证中'][Math.floor(Math.random() * 3)],
            description: ['包含用户操作记录', '包含系统日志', '包含交易数据', '包含通信记录'][Math.floor(Math.random() * 4)],
            remark: '证据完整性良好'
        }));
    
        const dataHandler = new DataHandler(mockEvidences);
    
        // 渲染表格数据
        function renderTable() {
            const {data, total, currentPage, totalPages} = dataHandler.getPageData();
            const tbody = document.querySelector('tbody');
            tbody.innerHTML = data.map(item => `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.evidenceId}</td>
                    <td>${item.evidenceType}</td>
                    <td>${item.source}</td>
                    <td>${item.collectTime}</td>
                    <td>${item.dataSize}</td>
                    <td>${item.reliability}</td>
                    <td>${item.status}</td>
                    <td>${item.description}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="editItem(${item.id})">编辑</button>
                        <button class="btn btn-sm btn-warning" onclick="deleteItem(${item.id})">删除</button>
                    </td>
                </tr>
            `).join('');
    
            // 更新分页信息
            document.querySelector('.pagination').innerHTML = `
                <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>
                </li>
                ${Array.from({length: totalPages}, (_, i) => i + 1).map(page => `
                    <li class="page-item ${page === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${page})">${page}</a>
                    </li>
                `).join('')}
                <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>
                </li>
            `;
    
            document.querySelector('.d-flex > div:first-child').textContent = `共 ${total} 条`;
        }
    
        // 分页切换
        function changePage(page) {
            if (page < 1 || page > Math.ceil(dataHandler.data.length / dataHandler.pageSize)) return;
            dataHandler.setPage(page);
            renderTable();
        }
    
        // 删除数据
        function deleteItem(id) {
            if (confirm('确定要删除这条记录吗？')) {
                dataHandler.delete(id);
                renderTable();
            }
        }
    
        // 编辑数据
        function editItem(id) {
            const item = dataHandler.data.find(item => item.id === id);
            const newStatus = prompt('请输入新的验证状态（已验证/待验证/验证中）：', item.status);
            if (newStatus !== null) {
                dataHandler.update(id, {
                    status: newStatus,
                    remark: '状态已更新'
                });
                renderTable();
            }
        }
    
        // 添加数据
        document.querySelector('button.btn-outline-secondary').onclick = function() {
            const newItem = {
                evidenceId: `E${String(dataHandler.data.length + 1).padStart(3, '0')}`,
                evidenceType: '电子记录',
                source: '系统采集',
                collectTime: new Date().toLocaleDateString(),
                dataSize: '100MB',
                reliability: '高',
                status: '待验证',
                description: '新增证据记录',
                remark: '待验证确认'
            };
            dataHandler.add(newItem);
            renderTable();
        };
    
        // 初始化渲染
        renderTable();
    
        // 每页显示条数变化处理
        document.querySelector('.form-select').addEventListener('change', function(e) {
            dataHandler.setPageSize(parseInt(e.target.value));
            renderTable();
        });
    </script>
    <script>
        function initCharts() {
            // 初始化有效证据占比图表
            const validChart = echarts.init(document.getElementById('validEvidenceChart'));
            validChart.setOption({
                series: [{
                    type: 'pie',
                    radius: ['70%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    data: [{
                        value: 62,
                        name: '有效',
                        itemStyle: {color: '#4e73df'}
                    }, {
                        value: 38,
                        name: '无效',
                        itemStyle: {color: '#e8e8e8'}
                    }]
                }]
            });

            // 初始化已按需证据占比图表
            const verifiedChart = echarts.init(document.getElementById('verifiedEvidenceChart'));
            verifiedChart.setOption({
                series: [{
                    type: 'pie',
                    radius: ['70%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    data: [{
                        value: 62,
                        name: '已验证',
                        itemStyle: {color: '#1cc88a'}
                    }, {
                        value: 38,
                        name: '未验证',
                        itemStyle: {color: '#e8e8e8'}
                    }]
                }]
            });
        }

        // DOM加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', initCharts);

        // 使用防抖函数优化窗口调整时的图表重绘
        function debounce(fn, delay) {
            let timer = null;
            return function() {
                clearTimeout(timer);
                timer = setTimeout(() => fn.apply(this, arguments), delay);
            }
        }

        // 优化后的窗口调整处理
        const handleResize = debounce(function() {
            const charts = ['validEvidenceChart', 'verifiedEvidenceChart'].map(id => 
                echarts.getInstanceByDom(document.getElementById(id))
            );
            charts.forEach(chart => chart && chart.resize());
        }, 100);

        window.addEventListener('resize', handleResize);
    </script>
</body>
</html>